/**
*@description 粉丝地域
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { browserHistory } from 'dva/router';
import styles from '../../routes/BusinessData.less';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';
import {Card, Icon, Tooltip, Row, Col} from 'antd';


const Phone = ({data, dispatch }) => {
  let tit = (<div><p>（1）ID匹配数 – 不同ID之间的匹配上的人数。</p>
              <p>（2）匹配率 – ID匹配数/对应ID的总用户数 x 100%。注：分母为列表中横向单元格对应ID的用户总数。</p></div>)
  return (
    <div className={styles.box}>
        <h3>手机号用户购买渠道分布&nbsp;
                    <Tooltip placement="right" title={tit}>
                      <Icon type="question-circle-o" className={styles.anticon}/>
                    </Tooltip></h3>
        <div className={styles.box_wrap}>
          <table className={styles.chart_tab} style={{margin:"50px auto 0"}}>
          <tbody  className={styles.cha_fix}>
            <tr className={styles.now_tr}>
              <td><span>ID匹配数</span></td>
              <td><span>手机号</span></td>
              <td><span>Wechat OpenID</span></td>
              <td><span>weibo uid</span></td>
            </tr>
            <tr>
              <td>手机号</td>
              <td>--</td>
              <td>{data.phonewxMatchNum}</td>
              <td>{data.phonewbMatchNum}</td>
            </tr>
            <tr>
              <td>Wechat OpenID</td>
              <td>{data.phonewxMatchNum}</td>
              <td>--</td>
              <td>{data.wbwxMatchNum}</td>
            </tr>
            <tr>
              <td>weibo uid</td>
              <td>{data.phonewbMatchNum}</td>
              <td>{data.wbwxMatchNum}</td>
              <td>--</td>
            </tr>
            </tbody>
          </table>
          <table className={styles.chart_tab} style={{margin:"50px auto 0"}}>
          <tbody className={styles.cha_fix}>
            <tr className={styles.now_tr}>
              <td><span>匹配率</span></td>
              <td><span>手机号</span></td>
              <td><span>Wechat OpenID</span></td>
              <td><span>weibo uid</span></td>
            </tr>
            <tr>
              <td>手机号</td>
              <td>--</td>
              <td>{data.PXXmatchrate}%</td>
              <td>{data.PWWmatchrate}%</td>
            </tr>
            <tr>
              <td>Wechat OpenID</td>
              <td>{data.PXPmatchrate}%</td>
              <td>--</td>
              <td>{data.WXWmatchrate}%</td>
            </tr>
            <tr>
              <td>weibo uid</td>
              <td>{data.PWPmatchrate}%</td>
              <td>{data.WXXmatchrate}%</td>
              <td>--</td>
            </tr>
            </tbody>
          </table>
          <p className={styles.zz_zhu}>
            注：分母为列表中横向单元格对应ID的用户总数。
          </p>
        </div>
      </div>
  );
};

Phone.propTypes = {
    // data: PropTypes.array
};

export default connect()(Phone);